<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟查询话费流量</title>
<style>
body{
font-family:微软雅黑}
label{
margin-right:10px;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<h2>查话费查流量</h2>
	<input type="radio" value="balance" v-model="type">
	<label for="balance">查话费</label>
    <input type="radio" value="traffic" v-model="type">
	<label for="traffic">查流量</label>
	<input type="button" value="查询" v-on:click="check">
	<p v-if="show">{{message}}</p>
</div>
<script type="text/javascript">
var exam = new Vue({
	el: '#example',
	data: {
		type : '',
		show : false,
		message : ''
	},
	methods: {
		check : function(){
			this.show = true;//显示查询结果
			//根据选择的类型定义查询结果
			if(this.type == 'balance'){
				this.message = '您的话费余额为6.66元';
			}else if(this.type == 'traffic'){
				this.message = '您的剩余流量为20兆';
			}else{
				this.message = '请选择查询类别！';
			}
		}
	}
})
</script>


</body>

</html>



